<template>
  <ul class="header-nav">
    <li class="home">
      <RouterLink to="/" style="width:60px;margin-top:32px">首页</RouterLink>
    </li>
    <div class="nav">
      <li><a href="#">C</a></li>
      <li><a href="#">C++</a></li>
      <li><a href="#">C#</a></li>
      <li><a href="#">Perl</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">Python</a></li>
      <li><a href="#">Pascal</a></li>
      <li><a href="#">Java</a></li>
      <li><a href="#">Go</a></li>
    <div class="goods-info">
      <router-link to="product">
        <div class="list">
        <img src="../assets/images/C语言.png" alt="">
        <img src="../assets/images/C++语言.png" alt="">
        <img src="../assets/images/Csharp语言.png" alt="">
        <img src="../assets/images/Go语言.png" alt="">
        <img src="../assets/images/Java语言.png" alt="">
      </div>
      </router-link>
    </div>
    </div>
  </ul>
</template>

<script>
export default {
  name: 'HeaderNav',
  setup(){

  }
}
</script>

<style scoped lang='less'>
.header-nav {
  width: 820px;
  display: flex;
  padding-left: 40px;
  position: relative;
  z-index: 998;

  .home a:hover{
    border-bottom: 1px solid rgb(217, 106, 26);
  }
  li {
    margin-right: 36px;
    width: 38px;
    text-align: center;

    a {
      font-size: 16px;
      line-height: 32px;
      height: 32px;
      display: inline-block;
    }

    &:hover {
      a {
        color: @shopColor;
        border-bottom: 1px solid @shopColor;
      }
    }
  }
}

.nav {
  width: 100%;
  float: left;
  line-height: 100px;
  padding-left: 65px;
  display: flex;
  li {
      float: left;
      flex: 1;

      a {
        font-size: 16px;
        margin-right: 20px;
        color: black;

        &:hover {
          color: #ff6700;
        }
      }
    }
    .goods-info {
      position: absolute;
      height: 0;
      width: 100%;
      background-color: white;
      top: 100px;
      left: 0;
      transition: height 0.3s;
      z-index: 9999;
      .list{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
}

.nav li:hover~.goods-info,
.nav .goods-info:hover {
  height: 150px;
  border: 1px solid rgb(224, 224, 224);
  box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
}
</style>
